<template>
  <div class="wrapper">
    <div class="wrapper_Header">
      <img src="../../assets/image/38.png" class="wrapper_Header_img" />
      <p>钻石商城</p>
    </div>
    <div class="wrapper_Milldle">
      <p class="wrapper_Milldle_1">我的钻石</p>
      <img src="../../assets/image/钻石.png" class="wrapper_Milldle_1_img1" />
      <img src="../../assets/image/0.png" class="wrapper_Milldle_1_img2" />
      <p class="wrapper_Milldle_2">兑换记录</p>
    </div>
    <div class="rated">
      <ul class="rated-list">
        <li v-for="item in radtedList" :key="item">
          <img :src="item.url" class="rated_img1" />
          <p class="title">{{ item.name }}</p>
          <div class="rated_last">
            <p class="count">{{ item.count }}</p>
            <img src="../../assets/image/钻石.png" class="rated_img2" />
            <p class="price">{{ item.price }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radtedList: [],
    };
  },
  mounted() {
    fetch(
      "https://www.fastmock.site/mock/ad1db91e97cdd1ef4705aa87029fcaed/shop/api/shop"
    )
      .then((response) => response.json())
      .then((res) => {
        console.log(res);
        this.radtedList = res.data.list;
        console.log(this.radtedList);
      });
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.wrapper {
  background: white;
  width: 100%;
  .wrapper_Header {
    width: 100%;
    height: 64px;
    display: flex;
    .wrapper_Header_img {
      margin-left: 25px;
      margin-top: 24px;
      width: 12px;
      height: 17px;
    }
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 100px;
      font-size: @xl-font;
    }
  }
  .wrapper_Milldle {
    display: flex;
    width: 100%;
    height: 64px;
    margin-bottom: 14px;
    .wrapper_Milldle_1 {
      margin-left: 15px;
      margin-top: 22px;
      font-size: @l-font;
    }
    .wrapper_Milldle_2 {
      font-size: @l-font;
      margin-left: 140px;
      margin-right: 15px;
      margin-top: 22px;
      color: rgb(82, 79, 79);
    }
    .wrapper_Milldle_1_img1 {
      width: 24px;
      height: 23px;
      margin-left: 21px;
      margin-top: 22px;
    }
    .wrapper_Milldle_1_img2 {
      width: 7px;
      height: 9px;
      margin-top: 28px;
    }
  }
  .rated {
    width: 345px;
    margin: 0 5px 0 15px;

    display: flex;

    .rated-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        width: 50%;
        width: 165px;
        background-color: #f5f5f5;
        border-radius: 10px;
        // border: 1px solid red;
        margin-bottom: 15px;
        .rated_img1 {
          width: 100%;
          height: 167px;
        }
        .title {
          font-size: @s-font;
          margin-left: 12px;
          margin-top: 15px;
          margin-bottom: 25px;
          line-height: 14px;
        }
        .rated_last {
          display: flex;
          justify-content: space-around;
          margin-bottom: 12px;
          .count {
            font-size: @xs-font;
            color: rgb(218, 213, 213);
            margin-left: 12px;
          }
          .rated_img2 {
            width: 17px;
            height: 15px;
          }
          .price {
            font-size: @xxxs-font;
            margin-right: 5px;
          }
          .rated_img2 {
            margin-left: 60px;
          }
        }
      }
    }
  }
}
</style>
